<template>
	<div class="addServer">
    <el-button
    type="primary"
    icon="el-icon-plus"
    size="small"
    @click="dialogFormVisible=true"
    style="background-color: #e8f4ff; border-color: #1890ff; color: #1890ff">新增
    </el-button>

    <div class="center">
      <!-- visible	是否显示 Dialog，支持 .sync 修饰符 -->
      <el-dialog title="添加预约信息" :visible.sync="dialogFormVisible">
        <!--  :rules="rules" -->
        <el-form>
          <el-form-item label="客户姓名：" prop="customerName">
            <el-input size="small" v-model="addApoint.customerName"  :style="{width:'500px'}"></el-input>
          </el-form-item>

          <el-form-item label="联系方式：" prop="customerPhone">
            <el-input size="small" v-model="addApoint.customerPhone"  :style="{width:'500px'}"></el-input>
          </el-form-item>

          <el-form-item label="预约时间：" prop="time">
            <el-date-picker  :style="{width:'500px'}"
              v-model="value1" size="small"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="车牌号码：" prop="licensePlate">
            <el-input size="small" v-model="addApoint.licensePlate"  :style="{width:'500px'}"></el-input>
          </el-form-item>

          <el-form-item label="汽车类型：" prop="carSeries">
            <el-input size="small" v-model="addApoint.carSeries"  :style="{width:'500px'}"></el-input>
          </el-form-item>

          <el-form-item label="服务类型：" prop="serviceType">
            <el-select size="small" v-model="addApoint.serviceType" placeholder="请选择"  :style="{width:'500px'}">
              <el-option label="维修"></el-option>
              <el-option label="保养"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注信息：" prop="info">
            <el-input :style="{width:'500px'}" size="small" v-model="addApoint.info"></el-input>
          </el-form-item>
        </el-form>
        <!-- 确定取消栏 -->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="adduser()">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
	</div>
</template>

<script>
import { appointmentApi } from "@/request/api";
export default{
  data(){
    return {
      dialogFormVisible: false,
      value1:"",
      tableData:[],
      addApoint:{
        customerName:'',
        customerPhone:'',
        appointmentTime:'',
        licensePlate:'',
        carSeries:'',
        serviceType:'',
        info:'',
      },
      // rules:{
      //   customerName:[
      //     {required:true, // 必填项
      //       message:"客户名不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   customerPhone:[
      //     {required:true, // 必填项
      //       message:"联系方式不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   time:[
      //     {required:true, // 必填项
      //       message:"预约时间不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   licensePlate:[
      //     {required:true, // 必填项
      //       message:"车牌号码不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   carSeries:[
      //     {required:true, // 必填项
      //       message:"汽车类型不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   serviceType:[
      //     {required:true, // 必填项
      //       message:"选项不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      // }
    }
  },
  methods:{
    async adduser(){
      if(this.addApoint){
        let res = await appointmentApi({...this.addApoint})
        this.dialogFormVisible = false
      }
      
      if(!res) return
      // res.rows= this.tableData
    }, 
  }
}
</script>

<style scoped lang="less">
.addServer{
  display: flex;
  justify-content: space-between;
}
</style>